<template>
  <div class="list-pages white-bg">
    <div class="search-box">
      <a-input
        v-model:value="searchText"
        allow-clear
        placeholder="请输入实验名称或教师姓名"
        :bordered="false"
      >
        <template #prefix>
          <SearchOutlined />
        </template>
      </a-input>
      <a-button type="primary">搜索</a-button>
    </div>
    <div class="list-scroll">
      <div class="list-box">
        <div
          class="list-item"
          v-for="(item, index) in listData"
          :key="index"
          @click="handlePreview(item)"
        >
          <a-tooltip
            title="已收藏"
            showArrow
            v-if="item.has_faved"
            placement="top"
          >
            <div
              class="item-collect cur"
              @click.stop="handleChangeCollet(item)"
            ></div>
          </a-tooltip>
          <div
            class="item-collect"
            v-else
            @click.stop="handleChangeCollet(item)"
          ></div>
          <div class="list-img">
            <img :src="item.experiment_thumb_url" alt="" />
          </div>
          <div class="list-content">
            <div class="content-title">{{ item.name }}</div>
            <div class="content-col">
              <div class="col-user">
                <img :src="item.userImg" class="user-img" />
                <div class="user-name">{{ item.userName }}</div>
              </div>
              <div class="col-date">{{ item.date }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination-box">
      <a-pagination
        v-model:current="current"
        v-model:page-size="pageSize"
        :total="total"
        :showSizeChanger="true"
        :show-total="(total) => `共 ${total}条数据`"
        @showSizeChange="onPageSizeChange"
        @change="onCurrentChange"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { useGlobalStore } from "@/store/modules/global";
import API from "@/api/user";
const store = useGlobalStore();
const router = useRouter();
const searchText = ref("");
const handleChangeCollet = async (item) => {
  item.has_faved = !item.has_faved;
  if (item.has_faved) {
    let params = {
      customer_experiment_id: item.customer_experiment_id,
      user_id: JSON.parse(localStorage.getItem("userInfo")).user_id,
      customer_experiment: item,
    };
    const res = await API.UserFavCustomerExperimentCreate(params);
  } else {
    let params = {
      customer_experiment_id: item.customer_experiment_id,
      user_id: JSON.parse(localStorage.getItem("userInfo")).user_id,
    };
    const res = await API.UserFavCustomerExperimentDelete(params);
  }
  getData();
};
const listData = ref([
  // {
  //   id: 1,
  //   name: "迈克尔逊干涉实验",
  //   userImg: "./data/user.png",
  //   userName: "张三",
  //   date: " 2023-12-15",
  //   img: "./data/迈克尔逊干涉实验.jpg",
  //   collet: true,
  // },
  // {
  //   id: 2,
  //   name: "压电陶瓷特性测量",
  //   userImg: "./data/user.png",
  //   userName: "张三",
  //   date: " 2023-12-15",
  //   img: "./data/压电陶瓷特性测量.jpg",
  //   collet: false,
  // },
  // {
  //   id: 3,
  //   name: "干涉法测量金属棒的热膨胀系数",
  //   userImg: "./data/user.png",
  //   userName: "张三",
  //   date: " 2023-12-15",
  //   img: "./data/干涉法测量金属棒的热膨胀系数.jpg",
  //   collet: true,
  // },
  // {
  //   id: 4,
  //   name: "利用牛顿环测定凸透镜的曲率半径",
  //   userImg: "./data/user.png",
  //   userName: "张三",
  //   date: " 2023-12-15",
  //   img: "./data/利用牛顿环测定凸透镜的曲率半径.jpg",
  //   collet: false,
  // },
  // {
  //   id: 5,
  //   name: "布鲁斯特角的测量",
  //   userImg: "./data/user.png",
  //   userName: "张三",
  //   date: " 2023-12-15",
  //   img: "./data/布鲁斯特角的测量.jpg",
  //   collet: false,
  // },
]);
const getData = async () => {
  console.log(1111, searchText.value);
  let params = {
    current: current.value,
    pageSize: pageSize.value,
    keyword: searchText.value,
    for_student: true,
  };
  const res = await API.CustomerExperimentPagedList({
    args: params,
    //type: type.value,
  });
  console.log(res);
  total.value = res.total;
  listData.value = res.data;
};
onMounted(async () => {
  await getData();
});

const total = ref(0);
const current = ref(1);
const pageSize = ref(10);
const onPageSizeChange = (page, size) => {
  pageSize.value = size;
  getData();
};

const onCurrentChange = (index, pageInfo) => {
  console.log(pageInfo, index);
  current.value = index;
  getData();
};

const handlePreview = (item) => {
  store.setTile("学校实验库 /" + item.name);
  let code = "";
  let types = null
  if (item.experiment_type_id == 2) {
    code = "Optics_T01_001";
    types=1
  } else if (item.experiment_type_id == 3) {
    code = "Optics_T02_001";
    types=2
  } else if (item.experiment_type_id == 1) {
    code = "Optics_T03_001";
    types = 3
  }
  
  router.push({
    path: "/school-experimental-preview",
    query: {
      id: item.experiment_id,
      type: types,
      code: code,
    },
  });
};
</script>
<style lang="less" scoped>
.list-pages {
  height: 100%;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  .search-box {
    display: flex;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #e5e7eb;
    .search-select {
      width: 120px;
    }
    .line {
      width: 1px;
      height: 16px;
      margin: 0 12px;
      background: #bec4ca;
    }
    .search-btn {
      width: 60px;
      height: 32px;
      background: #2776ff;
      border-radius: 4px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      line-height: 32px;
    }
  }
  .list-scroll {
    width: 100%;
    flex: 1;
  }
  .list-box {
    width: 100%;
    box-sizing: border-box;
    padding-top: 16px;
    overflow: auto;
    display: grid;
    gap: 16px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fill, minmax(261px, 1fr));
    justify-content: space-between;
    .list-item {
      width: 261px;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 8px;
      margin: auto;
      position: relative;
      cursor: pointer;
      &:hover {
        border: 1px solid #2776ff;
        box-shadow: 12px 12px 12px 0px rgba(39, 118, 255, 0.1);
      }
      .item-collect {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        width: 32px;
        height: 32px;
        background: rgba(0, 0, 0, 0.4) url(@/assets/icon-collet.png) no-repeat
          center center;
        border-radius: 0 8px 0 12px;
        &.cur {
          background: #ffffff url(@/assets/icon-collet-cur.png) no-repeat center
            center;
          border-radius: 0 8px 0 12px;
        }
      }

      .list-img {
        width: 245px;
        height: 249px;
        background: #f3f3f3;
        border: 1px solid #e6ebf1;
        border-radius: 8px;
        box-sizing: border-box;
        img {
          width: 100%;
          height: 100%;
          border-radius: 8px;
        }
      }
      .list-content {
        padding: 14px 0 6px;
        display: flex;
        flex-direction: column;
        .content-title {
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 16px;
          color: #31323a;
          margin-bottom: 10px;
          line-height: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .content-col {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .col-user {
            display: flex;
            align-items: center;
            .user-img {
              width: 26px;
              height: 26px;
              border-radius: 50%;
            }
            .user-name {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #262626;
              line-height: 16px;
              text-align: left;
              font-style: normal;
            }
          }
          .col-date {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #8c8c8c;
            line-height: 16px;
            text-align: center;
            font-style: normal;
          }
        }
      }
    }
  }

  .pagination-box {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
